import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools, Icon,WhiteSpace,Flex,Bubble,ActivityIndicator  } from 'weaver-mobile';
import { withRouter,Route } from 'react-router-dom';
import { StickyPage,ListPage,RouteLayout } from 'weaver-mobile-page';
import {openSystemApp,openWorkFlow} from '../../util/pulic-func';
import {getTemplate,getTemplate_peding} from '../../public/uiComponents/getTemplateInvoice';
import More from '../more/More';
import '../../style/styleTop.less';
require('../../public/icon/iconfont');
const getLabel = Tools.getLabel;

@withRouter
@inject ('homeStore','baseStore','emData')
@observer
class Home extends React.Component {
    constructor(props){
        super(props);
    }

    static defaultProps = {
        prefixCls:"fna-home"
    }

    componentDidMount() {
        const {homeStore,baseStore} = this.props;
        const { initData } = homeStore;
        const { getInvoiceCloudToken,getEquipmentFn } = baseStore;
        getInvoiceCloudToken({},()=>{
            initData({
                viewcondition: 41,
                moduleid: 1,
                menuid: 1
            });
        })
        getEquipmentFn();
        

    }

    render() {
        const { homeStore,prefixCls,emData,baseStore,match:{isExact} } = this.props;
        const { platePart,remindList,threeParties,order,threePartiesObj,remindObj,pendingObj,getUpComing,toMoreRoute,getThreeParties,loading,loadingThree } = homeStore;
        const { equipment } = baseStore;

        return (
            <div className={`${prefixCls}`} ref={ body_scroll =>{ this.body_scroll = body_scroll}}>
                <div className="container">
                    <StickyPage
                        topTabCom={<TopTabCom routeTo={(key)=>this.routeTo(key)} value={emData} isExact={isExact}/>}
                        contentCom={<ContentCom routeTo={(key)=>this.routeTo(key)} value={emData} isExact={isExact}/>}
                    >
                        <ActivityIndicator toast text="Loading..." animating={loading} size={'large'} />
                        <div className={`${prefixCls}-body`}>
                            <div className={`${prefixCls}-content`}>
                                {order.length > 0 && order.map( (key,index) =>{
                                    let comment = '', l = order.length - 1;

                                    if(key == threePartiesObj.id && threePartiesObj.show){
                                        comment = <React.Fragment key={key}>
                                            {
                                                threeParties.map( ele =>(
                                                    <div className={'multi-col-layouts'}  key={ele.key}>
                                                        {loadingThree ? 
                                                            <ActivityIndicator
                                                                text="Loading..."
                                                                animating={loadingThree}
                                                                size={'large'}
                                                                style={{justifyContent: 'center',marginTop:ele.plateFnList.length > 4 ? '53px' : '18px',marginBottom:ele.plateFnList.length > 4 ? '53px' : '18px'}}
                                                            />
                                                            :
                                                            <Flex className={`fna-flex-icon fna-flex-icon-04`} style={{'boxShadow':'0 1px 0 0 #E2E2E2'}}>
                                                                {ele.plateFnList.map( item => {
                                                                    let bool = (equipment.isWx === '' && !equipment.isDT) ? true : false;
                                                                    let comment = '';
                                                                    if(bool){
                                                                        comment = (
                                                                            <Flex.Item className={`fna-flex-icon-item`} key={item.key} style={item.itemStyle} onClick={()=>{this.downApplication(item.key)}}>
                                                                                <div className={`fna-flex-icon-item-icon`} style={item.item_icon_style}>
                                                                                    {item.icon ? <Icon type={item.icon} /> : <img src={`${item.picturePath}`} width="30" height="30" style={{borderRadius: '5px'}}/>}
                                                                                </div>
                                                                                <div className={`fna-flex-icon-item-text`} style={item.item_text_style}>{item.title}</div>
                                                                            </Flex.Item>
                                                                        )
                                                                    }
                                                                    
                                                                    return comment
                                                                })}
                                                            </Flex>
                                                        }

                                                        {index != l && <WhiteSpace size="sm" className='bgColor_f3f'/>}
                                                    </div>)
                                                )
                                            }
                                        </React.Fragment>
                                    }else if(key == remindObj.id && remindObj.show){ //报销提醒
                                        comment = <React.Fragment key={key}>
                                            {
                                                <div className={'multi-col-layouts'}>
                                                    <div style={{height:'44px',lineHeight:'44px'}}>
                                                        <span className={'plate_head_title'}></span>
                                                        <span className={'plate_head_con'}>{remindObj.title}</span>
                                                        <span className={'plate_head_more'} onClick={()=>{this.routeTo('accountBook')}}><span>{getLabel(17499,'更多')}</span><Icon type={'right'} /></span>
                                                    </div>
                                                    <WhiteSpace size="sm"/>
                                                    <ListPage.Normal
                                                        className={'fna-home-listPage'}
                                                        showCheck={false}
                                                        multipleCheck={false}
                                                        withSwipeAction={true}
                                                        template={getTemplate({haveBorder:false})}
                                                        store={remindList}
                                                        onRowClick={(v)=>this.invoiceEdit(v)}
                                                        swipeActionProps={{
                                                            style:{ backgroundColor: 'gray' },
                                                            autoClose:true,
                                                            right:[{
                                                                text: getLabel(516582 ,'删除'),
                                                                onPress: (value) => this.doDelete(value),
                                                                style: { backgroundColor: '#F4333C', color: 'white' },
                                                            }]
                                                            
                                                        }}
                                                        
                                                    />
                                                    {index != l && <WhiteSpace size="sm" className='bgColor_f3f'/>}
                                                </div>
                                            }
                                        </React.Fragment>
                                    }else if(key == pendingObj.id && pendingObj.show){ //待办事项
                                        comment = <React.Fragment key={key}>
                                            {
                                                <div className={'multi-col-layouts'}>
                                                    <div style={{height:'44px',lineHeight:'44px'}}>
                                                        <span className={'plate_head_title'}></span>
                                                        <span className={'plate_head_con'}>{pendingObj.title}</span>
                                                        <span className={'plate_head_more'} onClick={()=>{this.routeTo('apply')}}><span>{getLabel(17499,'更多')}</span><Icon type={'right'} /></span>
                                                    </div>
                                                    <WhiteSpace size="sm"/>
                                                    <ListPage.Normal
                                                        className={'fna-home-listPage-pending'}
                                                        showCheck={false}
                                                        multipleCheck={false}
                                                        withSwipeAction={true}
                                                        template={getTemplate_peding()}
                                                        store={platePart}
                                                        onRowClick={(data)=>{openWorkFlow('view',data.id,()=>{
                                                            getUpComing({
                                                                viewcondition: 41,
                                                                moduleid: 1,
                                                                menuid: 1
                                                            })
                                                        })}}
                                                    />
                                                    {index != l && <WhiteSpace size="sm" className='bgColor_f3f'/>}
                                                </div>
                                            }
                                        </React.Fragment>
                                    }

                                    return comment;

                                    
                                })}

                            </div>
                        </div>
                    </StickyPage>
                </div>
                <Route
                    key={toMoreRoute.id}
                    path={toMoreRoute.path}
                    render={() => {
                        return <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                               <More refresh={()=>{ getThreeParties(); }} />
                            </div>
                        </RouteLayout>
                    }}
                />
            </div>
        )
    }

    //路由跳转
    routeTo=(key)=>{
        const {history,match:{path}} = this.props;
        if(key == 'apply'){
            history.push(`/${key}/true`);
        }else{
            history.push(`/${key}`);
        }
    }    
    
    downApplication = (key) =>{
        const {history,homeStore} = this.props;
        const {toMoreRoute,docid,imagefileid} = homeStore;

        if(key == 'more'){
            history.push(toMoreRoute.path);
        }else if(key == 'regulations'){ //规章制度
            {docid ? window.open(`/spa/document/static4mobile/index.html#/systemDoc/doc/${docid}/attachst/iframe/${imagefileid}`) : Bubble.remind('暂无文档')}
        }else if(key == 'travelSchedule'){ //差旅日程
            window.location.href='/spa/workplan/static4mobile/#/calendar/myCalendar'
        }else if(key == 'billingAssistant'){ //开票助手
            history.push('/invoiceAssistant');
        } else{
            openSystemApp(key)
        }
    }

    invoiceEdit = (value) =>{
        const {history} = this.props;
        history.push(`/RememberDetailPage?id=${value.typeId}&valueId=${value.id}`)
    }

    //删除
    doDelete = (value) =>{
        const {homeStore} = this.props;
        const { doDeleteRemind,getReimbursementReminder } = homeStore;

        let params = {
            id:value.id,
            typeId:value.typeId
        }

        doDeleteRemind(params,()=>{
            getReimbursementReminder()
        });
        
        
        
    }


}

export default Home;




class ContentCom extends React.Component {
    componentWillReceiveProps(nextProps){
        if(JSON.stringify(this.props.value) != '{}'){
            return
        }
    }

    render() {
        const data = [
            {text: getLabel(516431,'记一笔'),icon: 'write-down-a-note',key:'remember'},
            {text: getLabel(516432,'发票录入'),icon: 'invoice-input',key:'reception'},
            {text: getLabel(516433,'记账本'),icon: 'book-of-account',key:'accountBook'},
            {text: getLabel(516434,'我的票夹'),icon: 'my-ticket-clip',key:'wallet'},
        ];

		let {isExact,value} = this.props;
        let {barColor,titleColor,clientType} = value;

        if(clientType == 'iPhone'){
            barColor = window.em ? (barColor ?  barColor.substr(1) : 'fff') : 'f00';
            titleColor = window.em ? (titleColor ?  titleColor.substr(1) : 'fff') : 'fff';
        }else{
            barColor = window.em ? (barColor ?  barColor.slice(2) : 'fff') : 'f00';
            titleColor = window.em ? (titleColor ?  titleColor.slice(2) : 'fff') : 'fff';
        }

        return (
            <div className="group" style={{background:`#${barColor}`,color:`#${titleColor}`}}>
                {
                    isExact && data.map(item => (
                        <div className="item" key={item.text} style={{ padding: '15px 0' }} onClick={()=>{this.props.routeTo(item.key)}}>
                            <Icon type={item.icon} size="lg" />
                            <span style={{ marginTop: '10px' }}>{item.text}</span>
                        </div>
                    ))
                }
            </div>  
        );
    }
 
}

class TopTabCom extends React.Component {
    componentWillReceiveProps(nextProps){
        if(JSON.stringify(this.props.value) != '{}'){
            return
        }
    }

    render() {
        const data = [
            {key: 'remember',icon: 'write-down-a-note'},
            {key: 'reception',icon: 'invoice-input'},
            {key: 'accountBook',icon: 'book-of-account'},
            {key: 'wallet',icon: 'my-ticket-clip'},
        ];
		
		let {isExact,value} = this.props;
        let {barColor,titleColor,clientType} = value;

        if(clientType == 'iPhone'){
            barColor = window.em ? (barColor ?  barColor.substr(1) : 'fff') : 'f00';
            titleColor = window.em ? (titleColor ?  titleColor.substr(1) : 'fff') : 'fff';
        }else{
            barColor = window.em ? (barColor ?  barColor.slice(2) : 'fff') : 'f00';
            titleColor = window.em ? (titleColor ?  titleColor.slice(2) : 'fff') : 'fff';
        }

        return (
            <div className="icon" style={{background:`#${barColor}`,color:`#${titleColor}`}}>
                {isExact && data.map(item => {
                    return (
                        <div className="item icon-item" key={item.key}><Icon type={item.icon} onClick={()=>{this.props.routeTo(item.key)}}/></div>
                    )
                })}
            </div>
        );
    }



}
